import React, { Component } from 'react';
import { Card, Form, Input, Button, Select, message } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { reqAddProduction } from '../../api';
import Modal from 'antd/lib/modal/Modal';
// 产品的添加和更新组件
class ProductAddUpdate extends Component {
    formRef = React.createRef();
    constructor(props) {
        super();
        this.state = {
            temp: {},
            card: {
                title: (
                    <span onClick={this.gouback} className='card-tit'>
                        <ArrowLeftOutlined /><span style={{ marginLeft: 10 }}>返回上级</span>
                    </span>
                )
            },
        }
    }
    onReset = () => {
        this.formRef.current.resetFields();
    }
    onFinish = async (values) => {
        values.state = '0';
        try {
            let res = await reqAddProduction(values)
            if (res.data.length != 0) {
                message.success('添加成功')
            }
            this.setState({temp:{
                id:'',info:'',name:'',price:'',typeid:''
            }},this.render)
        } catch (error) {
            message.error('添加失败,可能id重复')
            console.log(error);
        }
    }
    gouback = () => {
        this.props.history.goBack()
    };
    doubleBind = (ev) => {
        this.setState({
            temp:{
                ...this.state.temp,
                [ev.target.name]:ev.target.value
            }
        })
    }
    // 选择框的双向绑定
    doubleBind2 = (val) => {
        this.setState({
            temp:{
                ...this.state.temp,
                typeid:val
            }
        })
    }
    render() {
        const layout = {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 13,
            },
        };
        const validateMessages = {
            required: '${label}不能为空!',
        };
        const temp = this.state
        return (
            <>
                <Card title={this.state.card.title}>
                    <Form
                        ref={this.formRef}
                        {...layout}
                        name="nest-messages"
                        onFinish={this.onFinish}
                        validateMessages={validateMessages}
                    >
                        <Form.Item
                            name='id'
                            label="编号"
                            rules={[{ required: true, message: '请输入产品编号' }]}
                        >
                            <Input name='id' onChange={this.doubleBind} value={temp.id} />
                        </Form.Item>
                        <Form.Item
                            name='price'
                            label="价格"
                            rules={[{ required: true, message: '请输入产品价格' }]}
                        >
                            <Input  name='price' onChange={this.doubleBind} value={temp.price} addonAfter='万元起' />
                        </Form.Item>
                        <Form.Item
                            name='typeid'
                            label="类别"
                            rules={[{ required: true, message: '请选择产品类别' }]}
                        >
                            <Select onChange={this.doubleBind2} value={temp.typeid}>
                                <Select.Option value="001">新能源</Select.Option>
                                <Select.Option value="002">轿车</Select.Option>
                                <Select.Option value="003">SUV</Select.Option>
                                <Select.Option value="004">MPV</Select.Option>
                                <Select.Option value="005">卡车</Select.Option>
                                <Select.Option value="006">皮卡</Select.Option>
                                <Select.Option value="007">微面</Select.Option>
                                <Select.Option value="008">微卡</Select.Option>
                                <Select.Option value="009">轻客</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name='name'
                            rules={[{ required: true, message: '请输入产品名称' }]}
                            label="名称">
                            <Input name='name' onChange={this.doubleBind} value={temp.name} />
                        </Form.Item>
                        <Form.Item name='info' label="描述信息">
                            <Input.TextArea  name='info' onChange={this.doubleBind} value={temp.info}/>
                        </Form.Item>
                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                            <Button type="primary" htmlType="submit">
                                添加
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </>
        );
    }
}

export default ProductAddUpdate;